doctype html
html
    head
        title #{title}
        link(rel="stylesheet", href="../public/css/normalize.css")
        link(rel="stylesheet", href="../public/css/index.css")
    body
        #container        
            #header Koa-crawler
            #main
                .card(v-for="card in cards",@click="dosomthing(card.ename)") {{card.name}}
                        br
                        span {{card.ename}}
                        span.desc {{card.desc}}
                        
        script(src="../public/js/vue.js")
        script.

            new Vue({
                el:'#container',
                data:{
                    cards:[{
                        name:'爬取',
                        ename:'Crawler',
                        desc:'启动爬虫，开始从房天下爬去淄博所有二手房信息，并结构化到mysql'
                    },{
                        name:'分析',
                        ename:'Ansylse',
                        desc:'开始分析数据库中的数据，用图表charts的形式展示'
                    }]
                },
                methods:{
                    dosomthing:function(ename){
                        window.location.href='/'+ename
                    }
                }
            })
            